<template>
    <div class="Reviseprivateteachingcurriculum">
        <div class="Reviseprivateteachingcurriculum-title">
            <span @click="Goback()">修改课程</span>
        </div>
        <div class="Reviseprivateteachingcurriculum-content">
            <span>默认选择本地时区，点击可更改</span>
             <label class="Createcourse-data">
                <span><i>*</i> 主题</span>
                <el-cascader
                    v-model="Thethemevalue"
                    :options="Thetheme"
                    @change="handleChange">
                </el-cascader>
            </label>
            <label class="Createcourse-data">
                <span><i>*</i> 日期</span>
                <el-date-picker v-model="dateof" type="date" placeholder="选择日期"></el-date-picker>
            </label>
            <label class="Createcourse-Periodtime">
                <span><i>*</i> 时间段</span>
                <ul  class="Periodtime-List">
                    <!-- <span>{{item}}</span> -->
                    <li v-for="(items,e) in thetimes" :key="e" @click="chosePeriodtime(e,items[0].appointmentid)" :class="chosePeriodtimeindex == e?'seled':''">
                        {{items[0].starttime}}-{{items[0].endtime}}
                    </li>
                </ul>
            </label>
            <label class="Createcourse-button">
                <span>取消</span>
                <span @click="Confirmthechange()">确认修改</span>
            </label>
        </div>
    </div>
</template>
<script>
export default {
    name:'Reviseprivateteachingcurriculum',
    data(){
        return{
            Periodtime:[
                {
                    Periodtimes:'凌晨',
                    tiemrs:['00:00-00:30','00:30-01:00','01:00-01:30','01:30-02:00','02:00-02:30','02:30-03:00','03:00-03:30','03:30-04:00','04:00-04:30','04:30-05:00','05:00-05:30','05:30-06:00']
                    
                },
                {
                    Periodtimes:'早上',
                    tiemrs:['06:00-06:30','06:30-07:00','07:00-07:30','07:30-08:00']
                    
                },
                {
                    Periodtimes:'上午',
                    tiemrs:['08:00-08:30','08:30-09:00','09:00-09:30','09:30-10:00','10:00-10:30','10:30-11:00','11:00-11:30','11:30-12:00']
                    
                },
                {
                    Periodtimes:'中午',
                    tiemrs:['12:00-12:30','12:30-13:00','13:00-13:30','13:30-14:00']
                    
                },
                {
                    Periodtimes:'下午',
                    tiemrs:['14:00-14:30','14:30-15:00','15:00-15:30','15:30-16:00','16:00-16:30','16:30-17:00','17:00-17:30','17:30-18:00']
                    
                },
                {
                    Periodtimes:'晚上',
                    tiemrs:['18:00-18:30','18:30-19:00','19:00-19:30','19:30-20:00','20:00-20:30','20:30-21:00','21:00-21:30','21:30-22:00','22:00-22:30','22:30-23:00','23:00-23:30','23:30-00:00']
                    
                }
            ],
            Thetheme:[
                {
                    value:'Scene',
                    label:'场景',
                    children:[
                        {
                            value:'Restaurant',
                            label:'餐馆'
                        },
                        {
                            value:'Post Office',
                            label:'邮局'
                        },
                        {
                            value:'Hospital and health scene',
                            label:'医院及健康场景'
                        },
                        {
                            value:'Hotel',
                            label:'酒店'
                        },
                        {
                            value:'Shopping mall',
                            label:'商场购物'
                        },
                        {
                            value:'Work and work scenes',
                            label:'工作和上班场景'
                        },
                        {
                            value:'Airport',
                            label:'机场'
                        },
                        {
                            value:'Farm',
                            label:'农场'
                        },
                        {
                            value:'Campus',
                            label:'校园'
                        },
                        {
                            value:'Travel',
                            label:'旅行'
                        },
                        {
                            value:'Supermarket',
                            label:'超市'
                        },
                        {
                            value:'Drive',
                            label:'驾驶'
                        },
                        {
                            value:'Wedding',
                            label:'婚礼'
                        },
                        {
                            value:'Cinema',
                            label:'电影院'
                        },
                        {
                            value:'Entertainment place',
                            label:'娱乐场所'
                        },
                        {
                            value:'Gymnasium',
                            label:'体育馆'
                        },
                        {
                            value:'Museum',
                            label:'博物馆'
                        },
                        {
                            value:'Bar or KTV',
                            label:'酒吧或KTV'
                        },
                    ]
                },
                {
                    value:'Topic',
                    label:'主题',
                    children:[
                        {
                            value:'Self introduction',
                            label:'自我介绍'
                        },
                        {
                            value:'Learning and education',
                            label:'学习教育'
                        },
                        {
                            value:'Talk about music',
                            label:'聊聊音乐'
                        },
                        {
                            value:'Talk about family',
                            label:'聊聊家人'
                        },
                        {
                            value:'Talk about dressing',
                            label:'聊聊穿着'
                        },
                        {
                            value:'Talk about friends',
                            label:'聊聊朋友'
                        },
                        {
                            value:'Talk about delicious food',
                            label:'聊聊美食'
                        },
                        {
                            value:'Festivals and customs',
                            label:'节日和习俗'
                        },
                        {
                            value:'Talk about variety show',
                            label:'聊聊综艺节目'
                        },
                        {
                            value:'Talk about the near future plan',
                            label:'聊聊近期计划'
                        },
                        {
                            value:'Talking about hobbies',
                            label:'聊聊爱好'
                        },
                        {
                            value:'Talk about learning',
                            label:'聊聊学习'
                        },
                        {
                            value:'Talk about TV series',
                            label:'聊聊电视剧'
                        },
                        {
                            value:'Talk about movies',
                            label:'聊聊电影'
                        },
                        {
                            value:'Talk about work',
                            label:'聊聊工作'
                        },
                        {
                            value:'How to learn the language well',
                            label:'怎么学好这个语言'
                        },
                        {
                            value:'About tourism',
                            label:'关于旅游'
                        },
                        {
                            value:'Talk about geography',
                            label:'聊聊地理'
                        },
                        {
                            value:'Talking about ideals',
                            label:'谈谈理想'
                        },
                        {
                            value:'Talk about love',
                            label:'聊聊爱情'
                        },
                        {
                            value:'Talk about the weather',
                            label:'聊聊天气'
                        },
                        {
                            value:'Talk about some interesting things',
                            label:'聊一些趣事'
                        },
                    ]
                }
            ],//主题
            Thethemevalue:'',
            chosePeriodtimeindex:'',
            dateof:new Date,
            timers:this.$route.query.timers,
            masterid:this.$route.query.masterid,
            id:this.$route.query.id,
            thetimes:[],
            appointment_id:''
        }
    },
    created(){
        this.GetTimers()
    },
    methods:{
        Goback(){//返回上一页
            this.$router.go(-1);
        },
        handleChange(value) {
            console.log(value);
        },
        GetTimers(){
            var data ={
                start_time: this.timers+' 00:00:00',
                end_time:this.timers+' 23:59:59',
                master_id:this.masterid,
                offset:'+8',
                type:'single_class'
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/querySchedule',
                params:data,
                }).then((res) =>{
                    console.log(res.data.data,'时间')
                    res.data.data.forEach(e => {
                            var stars = e.start_time
                            var entimes = e.end_time
                            var starttime =  stars.substring(11, 16)//截取开始时间
                            var endtime =  entimes.substring(11, 16)//截取结束时间
                            var arrs = [
                                {
                                  'starttime' :starttime,
                                   'endtime':endtime,
                                   'appointmentid':e.id
                                }
                            ]
                            this.thetimes.push(arrs)
                            console.log(this.thetimes,'0000')
                    });
                }).catch((error) =>{
                console.log(error)
            })
        },
        chosePeriodtime(e,appointmentids){//选择时间段
            this.chosePeriodtimeindex =e
            this.appointment_id = appointmentids
            console.log(appointmentids)
        },
        Confirmthechange(){
            var master =  'master'
            var data = {
                id:this.id,
                offset:'+8',
                status:4,
                update_appointment_id:this.appointment_id,
                update_identity:master,
                update_title:this.Thethemevalue[0]+'/'+ this.Thethemevalue[1],
                update_type:'update'
            }
            this.$axios({
                method:'POST',
                url:'http://101.37.66.151:8768/eg-api/user/userAppointment/update',
                data:data,
                }).then((res) =>{
                    alert(res.data.message)
                }).catch((error) =>{
                console.log(error)
            })
            console.log(data,'000')
        }
    }
}
</script>
<style lang="less" scoped>
    .Reviseprivateteachingcurriculum{
        position: relative;
        width: 100%;
        background: #ffffff;
        border-radius: 20px;
    }
    .Reviseprivateteachingcurriculum-title{
        position: relative;
        width: 90%;
        height: 80px;
        border-bottom: 1px solid #47CECF;
        margin: 0 auto;
        padding-top: 0px;
        display: flex;
        align-items: center;
        background-image: url('/images/形状 3png.png');
        background-repeat: no-repeat;
        background-position-y: 20px;
        span{
            padding-left: 4%;
            height: 100%;
            width: 20%;
            line-height: 80px;
            font-size: 20.01px;
            font-weight: bold;
            color: #2DC7C8;
            cursor: pointer;
        }
    }
    .Reviseprivateteachingcurriculum-content{
        position: relative;
        width: 80%;
        margin: 0 auto;
    }
    .Reviseprivateteachingcurriculum-content>span{
        display: inline-block;
        width: 100%;
        height:40px;
        background:rgba(243,243,243,1);
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        color: #D9D8D8;
        margin-top: 10px;
        cursor: pointer;
    }
    .Reviseprivateteachingcurriculum-content>label{
        display: flex;
        width: 100%;
        margin-top: 30px;
        span{
            width: 10%;
            i{
                color: #FF7336;
            }
        }
    }
    .Createcourse-data{
        height: 60px;
        align-items: center;
        /deep/.el-date-editor{
            width: 50%;
            border: #CECECE;
        }
        /deep/.el-cascader{
            width: 50%;
            border: #CECECE;  
        }
    }
    .Createcourse-Periodtime{
        align-items: center;
        flex-wrap: wrap;
        ul{
            display: flex;
            width: 90%;
            padding: 0;
            flex-wrap: wrap;
            list-style: none;
            margin-left: auto;
            li{
                width: 16%;
                font-size: 12px;
                height: 31px;
                background:rgba(221,221,221,1);
                border-radius:16px;
                margin-top: 10px;
                text-align: center;
                line-height: 31px;
                margin-left: 1%;
                cursor: pointer;
                // &:first-child{
                //     width: 10%;
                //     background: none;
                // }
            }
        }
    }
    .Createcourse-Periodtime>span{
        margin-top: -8.5%;
    }
    .Periodtime-List>span{
        width: 6%!important;
        height: 31px!important;
        margin-top: 10px;
        line-height: 31px!important;
    }
    .Periodtime-List>li{
        background:rgba(221,221,221,1);
        &:nth-child(7){
            margin-left: 7%;
        }
        &:nth-child(12){
            margin-left: 7%;
        }
    }
    .seled{
        background: #3ACBCC!important;
    }
    .Createcourse-button{
        height: 100px;
        align-items: center;
        padding-bottom: 100px;
        span{
            width: 20%!important;
            height: 41px;
            line-height: 41px;
            text-align: center;
            cursor: pointer;
            &:first-child{
                background:rgba(222,222,222,1);
                border-radius:21px;
                margin-left: 14%;
            }
            &:last-child{
                background:rgba(58,203,204,1);
                border-radius:21px;
                color: #ffffff;
                margin-left: 4%;
            }
        }
    }
</style>